<script setup>
import { selectAllDep } from '@/api/department'
import { selectAll } from '@/api/department'
import { ref, onMounted, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { selectOne } from '@/api/department'
const input1 = ref()
const input2 = ref()
const tableData = ref([
])
const optionInfo = ref()
const total = ref(0)
const bumen = reactive({
  selectedId: null, // 部门id
})
const form = reactive({
  name: '',
  password: '',
  phone: '',
  email: '',
})
const propss = defineProps({
  message: String
})
const formRef = ref()


onMounted(() => {
  optionIn();
  dianji();
});


const refesh = () =>{
  input1.value = "",
  input2.value = "",
  bumen.selectedId = ""
}

//条件查询

const dianji = async () => {
  const res = await selectAll({
    id: input1.value,
    name: input2.value,
    departmentId: bumen.selectedId,
    PageNum: currentPage.value,
    PageSize: pageSize.value
  })
  if (res && res.data) {
    // console.log(res);
    tableData.value = res.data.data.list
    total.value = res.data.data.total
    bumen.selectedId = null
    input1.value = null
    input2.value = null
  } else {
    console.log("No data received");
  }
}

//查询部门
const optionIn = async () => {
  try {
    const res = await selectAllDep();
    if (res && res.data) {
      // console.log(res.data);
      optionInfo.value = res.data.data

    } else {
      console.log("No data received");
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

//分页相关
const currentPage = ref(1)
const pageSize = ref(12)

const handleSizeChange = (val) => {
  pageSize.value = val,
    dianji()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  dianji()
}

//定义的对话框
const dialogFormVisible = ref(false);

//定义点击修改
const handleEdit = async (id) => {
  dialogFormVisible.value = true;
  const res = await selectOne({
    id: id
  })
  console.log(res);

  if (res) {
    form.name = res.data.data.name
    form.password = res.data.data.password
    form.phone = res.data.data.phone
    form.email = res.data.data.email
    bumen.selectedId = res.data.data.departmentId
   
  }
}


//表单校验
const rules = ref({
  name: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '姓名长度为2-4', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文', trigger: 'blur' }, // 中文验证规则
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度为6到12', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请正确输入电话号码', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
});

//关闭按钮相关
const handleClose = () => {
  formRef.value.resetFields()
}

//取消按钮
const quxiaoFrom = () => {
  ElMessage.warning("取消成功")
  dialogFormVisible.value = false
  form.name = ''
  form.password = ''
  form.phone = ''
  form.email = ''
  bumen.selectedId = null
  formRef.value.resetFields()
}


// const handleDelete = async(id) =>{
//     const res = await     ({

//     })

// }


</script>

<template>

  <el-card style="margin-bottom: 20px;">
    <el-input v-model="input1" style="width: 200px" placeholder="搜索工号"/>
    <el-input v-model="input2" style="width: 200px; margin-left: 20px;" placeholder="搜索姓名"/>
    <el-select v-model="bumen.selectedId" placeholder="请选择" style="width: 100px; margin-left: 20px;">
        <el-option v-for="option in optionInfo" :key="option.value" :label="option.departmentName"
          :value="option.departmentId" />
      </el-select>
      <el-button type="primary" style="margin-left: 10px;" @click="dianji()">搜索</el-button>
      <el-button type="primary" style="margin-left: 10px;" @click="refesh()">重置</el-button>
  </el-card>

  
  <el-table :data="tableData" style="width: 100%; padding-top: 20px;" height="600">
    <el-table-column prop="id" label="工号" align="center" />
    <el-table-column prop="name" label="姓名" align="center" />
    <el-table-column prop="departmentName" label="部门" align="center" />
    <el-table-column prop="prop" label="职能" align="center">
      <template #default="scope">
        <el-button size="small" :style="{
          backgroundColor: scope.row.positionName === '员工' ? '#409EFF' : '#67C23A',
          color: 'white'
        }">
          {{ scope.row.positionName === '员工' ? '员工' : '经理' }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column prop="prop" label="性别" width="100">

      <template #default='scope'>
        {{ scope.row.sex == 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="电话" align="center" />
    <el-table-column prop="imgUrl" label="图片" align="center" width="80">
            <template #default="scope">
              <!-- 调试信息 -->
              <el-image
                :src="scope.row.isDefaultAvatar ? '../../assets/background.jpg' : scope.row.imgUrl"
                :preview-src-list="[scope.row.isDefaultAvatar ? '../assets/background.jpg' : scope.row.imgUrl]"
                preview-teleported="true"
                style="display: block; width: calc(8vh - 20px); height: calc(8vh - 20px); border-radius: 6px;"
              />
            </template>
    </el-table-column>
    <el-table-column prop="createBy" label="创建人" align="center" />
    <el-table-column prop="createDate" label="创建时间" align="center" />
    <el-table-column prop="updateBy" label="修改人" align="center" />
    <el-table-column prop="updateDate" label="修改时间" align="center" />
    <el-table-column prop="prop" label="" align="center"></el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[12, 14, 20, 40]"
      layout="total,sizes,prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>

  <el-dialog v-model="dialogFormVisible" @close="handleClose" title="人员修改" width="600">
    <el-form :model="form" :rules="rules" ref="formRef" style="margin: auto;">

      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name" style="margin-left: 20px;">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码:" prop="password" style="margin-left: 20px;">
            <el-input v-model="form.password" type="password" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号:" prop="phone" style="margin-left: 5px;">
            <el-input v-model="form.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮件:" prop="email" style="margin-left: 20px;">
            <el-input v-model="form.email" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="部门" prop="bumen.selectedId" style="margin-left: 20px;">
        <el-select v-model="bumen.selectedId" placeholder="请选择" style="width: 115px; margin-left: 10px;">
          <el-option v-for="option in optionInfo" :key="option.value" :label="option.departmentName"
            :value="option.departmentId" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="quxiaoFrom">取消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="isDisabled = true">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.demo-pagination-block {
  margin-top: 20px;
}
</style>